<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0" id="list" lay-title="自定义查询">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card hxr-layui-card" id="memberlistv">
                    <div class="layui-form hxradmin-card-header">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label" style='width:85px;'>日期范围</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="val2" id='date' autocomplete="off" class="layui-input" placeholder="请选择时间">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" @click="click_search()" id="search">搜索</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space15" v-if="is_ajax>0">
                            <div class="layui-col-sm4" style="width: 49%">
                                <div class="layui-card">
                                    <div class="layui-card-header">消费统计--{{search_date}}</div>
                                    <div class="layui-card-body layui-text">
                                        <div class="flex box">
                                            <div class="flex item">
                                                <img class="icon" src="hxradmin/images/xiaofei.png">
                                                <div>
                                                    <span class="nepadmin-linecard-text">{{detail.xiaofei.total}}</span>
                                                    <span class="nepadmin-ignore">元</span>
                                                    <p class="nepadmin-linecard-title">平台总消费</p>
                                                </div>
                                            </div>
                                            <div class="item xitem">
                                                <div class="flex xxitem">
                                                    <!--										<span class="dian">●</span>-->
                                                    <div>
                                                        <span class="nepadmin-linecard-text">{{detail.xiaofei.school_p}}</span>
                                                        <span class="nepadmin-ignore">元</span>
                                                        <p class="nepadmin-linecard-title">校园普通消费</p>
                                                    </div>
                                                </div>
                                                <div class="flex xxitem">
                                                    <!--										<span class="dian">●</span>-->
                                                    <div>
                                                        <span class="nepadmin-linecard-text">{{detail.xiaofei.hote}}</span>
                                                        <span class="nepadmin-ignore">元</span>
                                                        <p class="nepadmin-linecard-title">酒店包时消费</p>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="item xitem">
                                                <div class="flex xxitem">
                                                    <!--										<span class="dian">●</span>-->
                                                    <div>
                                                        <span class="nepadmin-linecard-text">{{detail.xiaofei.school_b}}</span>
                                                        <span class="nepadmin-ignore">元</span>
                                                        <p class="nepadmin-linecard-title">校园包机消费</p>
                                                    </div>
                                                </div>
                                                <!--									<div class="flex xxitem">-->
                                                <!--										<div >-->
                                                <!--											<span class="nepadmin-linecard-text">{{detail.xiaofei.school_f}}</span>-->
                                                <!--											<span class="nepadmin-ignore">元</span>-->
                                                <!--											<p class="nepadmin-linecard-title">校园包机退款</p>-->
                                                <!--										</div>-->
                                                <!--									</div>-->
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="layui-col-sm4" style="width: 49%">
                                <div class="layui-card">
                                    <div class="layui-card-header">会员统计--{{search_date}}</div>
                                    <div class="layui-card-body layui-text">
                                        <div class="flex box">
                                            <div class="flex item">
                                                <img class="icon" src="hxradmin/images/xiaofei.png">
                                                <div>
                                                    <span class="nepadmin-linecard-text">{{detail.member_add.register_num}}</span>
                                                    <span class="nepadmin-ignore">个</span>
                                                    <p class="nepadmin-linecard-title">新增会员数</p>
                                                </div>
                                            </div>
                                            <div class="item xitem">
                                                <div class="flex xxitem">
                                                    <!--										<span class="dian">●</span>-->
                                                    <div>
                                                        <span class="nepadmin-linecard-text">{{detail.member_add.member_use_num_no}}</span>
                                                        <span class="nepadmin-ignore">个</span>
                                                        <p class="nepadmin-linecard-title">新增会员免费上网</p>
                                                    </div>
                                                </div>
                                                <div class="flex xxitem">
                                                    <!--										<span class="dian">●</span>-->
                                                    <div>
                                                        <span class="nepadmin-linecard-text">{{detail.member_add.member_use_count_hua}}</span>
                                                        <span class="nepadmin-ignore">个</span>
                                                        <p class="nepadmin-linecard-title">新增会员消费人数</p>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="item xitem">
                                                <div class="flex xxitem">
                                                    <!--										<span class="dian">●</span>-->
                                                    <div>
                                                        <span class="nepadmin-linecard-text">{{detail.member_add.member_use_money}}</span>
                                                        <span class="nepadmin-ignore">元</span>
                                                        <p class="nepadmin-linecard-title">消费金额</p>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="layui-col-sm4" style="width: 100%">
                                <div class="layui-card">
                                    <div class="layui-card-header">代理排行--{{search_date}}</div>
                                    <div class="layui-card-body" id="">
                                        <table  id="agent_table">

                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<style type="text/css">
    #list .box {
        justify-content: space-around;
    }

    #list .box .item {
        padding: 12px 0 0;
    }

    #index-echartLine,
    #index-echart,
    #sex-statistics {
        height: 400px;
    }
    #new_member {
        height: 400px;
    }
    #list .icon {
        width: 90px;
        padding-right: 20px;
        margin-top: -15px;
    }

    #list .xitem .nepadmin-linecard-text {
        font-size: 20px;
    }

    #list .xitem .nepadmin-linecard-title {
        font-size: 14px;
    }

    #list .xxitem .dian {
        padding-right: 15px;
    }

    #list .xxitem .nepadmin-linecard-title {
        padding: 0;
    }

    #list .xxitem {
        padding: 0 0 15px;
    }

    #list .layui-card .layui-card-header {
        font-weight: bold;
    }

    .layui-tab-title dd.layui-this::after {
        display: none !important;
    }

    .layui-tab-title dd.layui-this {
        color: #fff !important;
    }

    .layui-tab-title .layui-inline {
        font-size: 14px;
        float: right;
        padding: 2px;
    }

    .layui-tab-title .layui-form-select .layui-input {
        width: 150px;
    }
</style>
<script>




        var forms=new Vue({
            el:'#list',
            data: {
                detail: {},
                is_ajax:0,
                search_date:'上周'
            },
            mounted: function() {
                var _this = this;
                layui.admin.ajax('ranking/custom_query', {}, 1).then(function(res) {
                    _this.detail = res.data;
                    _this.is_ajax=1;
                    _this.agent_table(res.data.agent_table);

                });
            },
            methods:{
                agent_table:function (data) {
                    layui.use(['table', 'form','laydate','layer'], function() {
                        var form = layui.form,
                            $ = layui.$, laydate = layui.laydate;
                        //日期范围
                        laydate.render({
                            elem: '#date'
                            , range: true
                        });
                        var table = layui.table;
                        table.render({
                            elem: '#agent_table'
                            , cols: [[ //标题栏
                                // {field: 'id', title: 'ID', width: 80, sort: true}
                                 {field: 'agent_name', title: '用户名', width: 120}
                                , {field: 'hotel_name', title: '负责地方', minWidth: 150}
                                , {field: 'consume_money', title: '消费', minWidth: 200 ,totalRow:true}
                                , {field: 'device_num', title: '设备数量', width: 200 ,totalRow:true}
                                , {field: 'create_time', title: '注册时间', width: 200}

                            ]]
                            , data: data
                            //,skin: 'line' //表格风格
                            , even: true
                            ,totalRow:true
                            //,page: true //是否显示分页
                            //,limits: [5, 7, 10]
                            //,limit: 5 //每页默认显示的数量
                        });
                    })
                 },
                click_search:function() {
                    var  $ = layui.$;
                    var val2 = $('input[name="val2"]').val();
                    var _this = this;
                    layui.admin.ajax('ranking/custom_query', {
                        datemin:val2.split(' ')[0],
                        datemax:val2.split(' ')[2],}, 1).then(function(res) {
                        _this.detail = res.data;_this.search_date=val2;
                        _this.agent_table(res.data.agent_table);

                    });


                }
            }
        })




</script>
